<script lang="ts" setup>
import { ref } from 'vue'
import AddressItem from '@/components/address/addressItem/addressItem.vue' // 导入子组件
import { getAddressList } from '@/service/user/address'
import type { CustomAddressVo } from '@/service/user/address.d'

const emit = defineEmits(['select', 'update:modelValue', 'close'])
const show = ref(false)
const addressList = ref<CustomAddressVo[]>([])
const pagination = ref({
  current: 1,
  size: 10,
  total: 0,
})
const loading = ref(false)
const isFinished = ref(false)

// 加载地址列表
const loadAddressList = async () => {
  try {
    loading.value = true
    const res = await getAddressList({
      current: pagination.value.current,
      size: pagination.value.size,
    })

    addressList.value = [...addressList.value, ...res.data.records]
    pagination.value.total = res.data.total
    isFinished.value = addressList.value.length >= res.data.total
  } finally {
    loading.value = false
  }
}

// 加载更多
const loadMore = () => {
  if (!isFinished.value && !loading.value) {
    pagination.value.current += 1
    loadAddressList()
  }
}

// 地址选择
const handleSelect = (item: CustomAddressVo) => {
  emit('select', item)
  show.value = false
}

// 删除地址
const handleDeleteAddress = (id: number) => {
  addressList.value = addressList.value.filter((item) => item.id !== id)
}

// 新增/编辑地址
const handleAddAddress = () => {
  uni.navigateTo({ url: '/pages/my/address/edit?type=add' })
}

const handleEditAddress = (type: 'add' | 'edit', item?: CustomAddressVo) => {
  uni.navigateTo({
    url: `/pages/my/address/edit?type=${type}&id=${item?.id || ''}`,
  })
}

// 暴露方法
const handleOpen = () => {
  show.value = true
  pagination.value.current = 1
  addressList.value = []
  loadAddressList()
}
const handleClose = () => {
  show.value = false
  emit('close')
}

defineExpose({ handleOpen, handleClose })
</script>
<template>
  <view class="change-address">
    <wd-popup
      v-model="show"
      position="bottom"
      teleport="#app"
      custom-style="border-radius:32rpx 32rpx 0 0; height:80vh;"
      @close="handleClose"
    >
      <view class="address-panel">
        <!-- 标题栏 -->
        <view class="header">
          <text class="title">选择收货地址</text>
          <wd-icon name="close" @click="handleClose" />
        </view>

        <!-- 地址列表 -->
        <scroll-view scroll-y class="address-scroll" @scrolltolower="loadMore">
          <AddressItem
            v-for="item in addressList"
            :key="item.id"
            :address-item="item"
            @delete="handleDeleteAddress"
            @edit="handleEditAddress"
            @select="handleSelect(item)"
          />

          <!-- 加载状态 -->
          <view v-if="loading" class="loading-text">加载中...</view>
          <view v-else-if="isFinished" class="loading-text">没有更多了~</view>
        </scroll-view>

        <!-- 新增按钮 -->
        <view class="footer-btn">
          <wd-button type="primary" block custom-class="custom-shadow" @click="handleAddAddress">
            新增地址
          </wd-button>
        </view>
      </view>
    </wd-popup>
  </view>
</template>
<style lang="scss" scoped>
.address-panel {
  z-index: 100;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx;
    border-bottom: 2rpx solid #f5f5f5;

    .title {
      font-size: 32rpx;
      font-weight: 500;
    }

    .wd-icon {
      font-size: 40rpx;
      color: #999;
    }
  }

  .address-scroll {
    box-sizing: border-box;
    flex: 1;
  }

  .loading-text {
    padding: 24rpx;
    font-size: 24rpx;
    color: #999;
    text-align: center;
  }

  .footer-btn {
    padding: 32rpx;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 30%);
    :deep() {
      .custom-shadow {
        background-color: $uni-bg-themes;
        box-shadow:
          0 3px 1px -2px rgb(0 0 0 / 20%),
          0 2px 2px 0 rgb(0 0 0 / 14%),
          0 1px 5px 0 rgb(0 0 0 / 12%);
      }
    }
  }
}
</style>
